<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>我的优惠劵</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/common/mui.min.css">
	<link rel="stylesheet" href="../css/common/mui.extra.css">
	<link rel="stylesheet" href="../css/common/common.css">
	<style>
			.mui-pull-bottom-wrapper {text-align: center !important;color: #999 !important;}
			#sliderSegmentedControl .mui-scroll .mui-control-item{color:#999;}
			#sliderSegmentedControl .mui-scroll .mui-control-item.mui-active {font-weight: bold;border-bottom: 3px solid #000 !important;line-height: 36px;color:#000;}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border-top:none;}
			.mui-table-view .mui-media-object{line-height:normal;max-width:100px;height: 60px;}
			.cj-coupon-price{font-size:24px;line-height:40px;text-align:center;color:#dd524d;}
			.cj-coupon-price span{font-size:14px;}
			.cj-coupon-price-full{font-size:12px;color:#8f8f94;}
	</style>
</head>

<body class="cj-bg-light-grey">
	<header class="mui-bar mui-bar-nav mui-white-nav-bar">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">我的优惠劵</h1>
	</header>
	<div class="mui-content  cj-bg-light-grey" >
		<div id="slider" class="mui-slider mui-fullscreen mui-content-phone">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll cj-bg-white">
					<a class="mui-control-item mui-active" href="#item1mobile">
									未使用
					</a>
					<a class="mui-control-item" href="#item2mobile">
									已使用
					</a>
					<a class="mui-control-item" href="#item3mobile">
									已过期
					</a>
				</div>
			</div>
			<div class="mui-slider-group">
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
					<div id="scroll1" class=" mui-scroll-wrapper">
						<div class="mui-scroll" >
							<ul  class="mui-table-view" id="noUseList">


							</ul>
						</div>
					</div>
				</div>
				<div id="item2mobile" class="mui-slider-item mui-control-content">
					<div id="scroll2" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view" id="usedList">

							</ul>
						</div>
					</div>
				</div>
				<div id="item3mobile" class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view" id="overdueList">

							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="footer"></div>
	<script type="text/html" id="noUseTpl">
		<% for(var i=0;i<result.length;i++){
						include('noUse',result[i]);
				}
		%>
	</script>
	<script type="text/html" id="usedTpl">
		<% for(var i=0;i<result.length;i++){
						include('used',result[i]);
				}
		%>
	</script>
	<script type="text/html" id="overdueTpl">
		<% for(var i=0;i<result.length;i++){
						include('used',result[i]);
				}
		%>
	</script>
	<script type="text/html" id="noUse">
		<li class="mui-table-view-cell mui-media">
			<a href="#">
				<div class="mui-media-object mui-pull-left">
					<div class="cj-coupon-price">
						<span>￥</span><%==$data.favourablePrice%>
					</div>
					<span class="cj-coupon-price-full" >满<%==$data.amountNeed%>可用</span>
				</div>
				<div class="mui-media-body">
					<%==$data.cName%>
					<p class='mui-ellipsis'>
						使用范围:<%==$data.type%>
					</p>
					<p class='mui-ellipsis'>
						<%==$data.startTime%>-<%==$data.endTime%>
					</p>
				</div>
			</a>
		</li>

	</script>
	<script type="text/html" id="used">

		<li class="mui-table-view-cell mui-media">
			<a href="#">
				<div class="mui-media-object mui-pull-left">
					<div class="cj-coupon-price" style="color:#8f8f94;">
						<span>￥</span><%==$data.favourablePrice%>
					</div>
						<span class="cj-coupon-price-full" >满<%==$data.amountNeed%>可用</span>
				</div>
				<div class="mui-media-body" style="color:#8f8f94;">
				<%==$data.cName%>
				<p class='mui-ellipsis'>
					使用范围:<%==$data.type%>
				</p>
				<p class='mui-ellipsis'>
					<%==$data.startTime%>-<%==$data.endTime%>
				</p>
				</div>
			</a>
		</li>
	</script>

	<script src="../js/common/template-web.js"></script>
	<script src="../js/common/mui.min.js"></script>
	<script src="../js/common/mui.href.js"></script>
	<script src="../js/common/mui.pullToRefresh.js"></script>
	<script src="..//js/common/mui.pullToRefresh.material.js"></script>
	<script src="..//js/common/common.js"></script>
	<script src="..//js/user/coupon.js"></script>
</body>

</html>
